{% extends 'layout.html' %}
{% load static %}
{% load permission %}
{% block css %}
    <style>
        .top-message-error {
            position: fixed;
            left: 0;
            right: 0;
            width: 400px;
            margin-left: auto;
            margin-right: auto;
            top: 0;
        }
    </style>
{% endblock %}
{% block content %}
    {% if messages %}
        <div class="top-message-error">
            {% for obj in messages %}
                <div class="alert alert-{{ obj.level_tag }}" role="alert">
                    {{ obj.message }}
                </div>
            {% endfor %}
        </div>
    {% endif %}
    <div class="panel panel-default">
        <div class="panel-heading"><i class="fa fa-line-chart"></i> 攻击IP统计图</div>
        <div class="panel-body">
            <div id="attackIP" cid="{{ id }}" style="width:100%;min-height:300px"></div>
        </div>
    </div>
    <div style="margin-bottom: 10px;" class="right">
        <form class="form-inline" method="get">
            <div class="form-group">
                <input name="keyword" type="text" class="form-control" placeholder="请输入关键字" value="{{ keyword }}">
            </div>
            <button type="submit" class="btn btn-primary">
                <span class="glyphicon glyphicon-search"></span>
            </button>
        </form>

    </div>
    <table class="table table-bordered table-hover table-striped">
        <thead>
        <tr>
            <th>源IP</th>
            <th>关联告警</th>
            <th>位置</th>
            <th>攻击次数</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for row in pager.queryset %}
            <tr>
                <td>{{ row.attack_sip }}</td>
                {% if row.association_devie %}
                    <td><a class='btn btn-danger btn-xs'>{{ row.association_devie }}</a></td>
                {% else %}
                    <td></td>
                {% endif %}
                <td>{{ row.location }}</td>
                <td>{{ row.ct }}</td>
                <td>
                    {% blockip_permission request 'skyeye_block_ip' pk=id src_ip=row.attack_sip %}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <ul class="pagination">
        {{ pager.html }}
    </ul>

{% endblock %}

{% block js %}
    <script src="{% static 'plugins/highcharts/highcharts.js' %}"></script>
    <script>
        var CHART_TITLE = "攻击数量统计";
        var CID = $("#attackIP").attr("cid");
        var API_URL = "{% url 'skyeye_attackip_chart' %}";
        $(function () {
            initChart(CID);
        });

        function initChart() {
            var config = {
                chart: {
                    type: 'column'
                },
                title: {
                    text: null
                },
                credits: {
                    enabled: false // 关闭版权信息
                },
                xAxis: {
                    categories: ['信息技术所', '科信部', '运输部']
                },

                yAxis: {
                    min: 0,
                    title: {
                        text: 'IP攻击数量'
                    },
                    stackLabels: {  // 堆叠数据标签
                        enabled: true,
                        style: {
                            fontWeight: 'bold',
                            color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                        }
                    }
                },
                legend: {
                    align: 'center',
                    verticalAlign: 'top'

                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.x + '</b><br/>' +
                            this.series.name + ': ' + this.y + '<br/>' +
                            '总量: ' + this.point.stackTotal;
                    }
                },
                plotOptions: {
                    column: {
                        stacking: 'normal',
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                series: [{
                    name: '高危',
                    data: [5, 3, 4]
                }, {
                    name: '中危',
                    data: [2, 2, 3]
                }, {
                    name: '低危',
                    data: [3, 4, 4]
                }]
            };
            // Highcharts.chart('projectDepart', config);
            $.ajax({
                url: API_URL,
                type: "GET",
                data: {id: CID},
                dataType: "JSON",
                success: function (res) {
                    config.xAxis.categories = res.data.categories;
                    config.series = res.data.series;
                    Highcharts.chart('attackIP', config);

                }
            })
        }
    </script>

{% endblock %}